<template>
  <div class="search">
    <!-- 热门推荐 -->
    <div class="hot">
      <p class="title">热门搜索</p>
      <div class="iteam" v-for="it in hot" :key="it.word">
        <span class="true" v-if="it.highlight === true">
          {{ it.word }}
        </span>
        <span class="false" v-else>
          {{ it.word }}
        </span>
      </div>
    </div>
    <!-- 分类 -->
    <div class="category">
      <p>商品分类</p>
        <div class="iteam" v-for="i in categories" :key="i.id">
          <img :src="i.imageUrl" alt="">
          <span>{{ i.name }}</span>
        </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Grid, GridItem } from 'vant'
Vue.use(Grid)
Vue.use(GridItem)
export default {
  name: 'Search',
  data() {
    return {
      hot: [],
      categories: []
    }
  },
  created() {
    this.$http.getSearch().then(resData => {
      // console.log(resData.hotWords)
      this.hot = resData.hotWords
      // console.log(this.hot)
    })
    this.$http.getCategories().then(resData => {
      resData.list.shift()
      this.categories = resData.list
      console.log(this.categories)
    })
  }
}
</script>

<style lang="scss" scoped>
  .hot{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    height: 527px;
    margin-top: 20px;
    .title{
      margin-left: 30px;
      font-size: 16px;
      display: block;
      width: 100%;
      height: 30px;
    }
    .iteam{
      display: block;
      font-size: 14px;
      background-color: #f5f5f5;
      margin: 9px;
      width: 75px;
      height: 50px;
      text-align: center;
      border-radius: 20px;
      span{
        margin-top: 15px;
        display: block;
        color: #43240c;
      }
      .true{
        color: #fa585a;
      }
    }
  }
  .category{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    p{
      margin-left: 30px;
      font-size: 16px;
      display: block;
      width: 100%;
      height: 30px;
    }
    .iteam{
      font-size: 12px;
      margin: 10px;
      width: 165px;
      height: 175px;
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #43240c;
    }
  }
</style>
